<template>
  <div class="headerWarp">
    <header class="container">
      <div class="logo">
        <a href="#">
          <img src="/image/home/logo1.png" alt="" />
        </a>
      </div>
      <nav class="nav-menu">
        <ul class="clearfix">
          <li
            :class="[$route.path == item.path ? 'active' : '']"
            v-for="item in list"
            :key="item.path"
            @click="jump(item.path)"
          >
            {{ item.content }}
          </li>
        </ul>
      </nav>
      <div class="linkUs">
        <img src="/image/home/phone.png" alt="" />
        400-0099-771
      </div>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          content: "首页",
          path: "/"
        },
        {
          content: "关于我们",
          path: "/linkUs/companyIntroduction"
        },
        {
          content: "公司新闻",
          path: "/news"
        },
        {
          content: "招商APP",
          path: "/app"
        },
        {
          content: "数据管控系统",
          path: "/system"
        },
        {
          content: "在线招商流程",
          path: "/InvestmentProcess"
        },
        {
          content: "人才招聘",
          path: "/talentRecruitment"
        },
        {
          content: "联系我们",
          path: "/aboutUs"
        }
      ],
      current: "/"
    };
  },
  methods: {
    jump(res) {
      this.$router.push({ path: res });
    }
  }
};
</script>
<style lang="scss" scoped>
.headerWarp {
  width: 100%;
  position: relative;
}
.container {
  width: 100%;
  position: fixed;
  align-items: center;
  justify-content: center;
  display: flex;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #333;
  z-index: 2;
  .logo {
    img{
      width: 52px;
      height: 54px;
    }
  }
}
.nav-menu {
  line-height: 90px;
  margin-left: 27px;
  min-width: 1000px;
  .active {
    border-bottom: 3px solid #fff;
  }
  ul {
    li {
      cursor: pointer;
      float: left;
      padding: 0 24px;
      font-size: 18px;
      color: #fff;
    }
  }
}

.linkUs {
  margin-left: 15px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  min-width: 167px;
  img {
    width: 27px;
    height: 27px;
  }
}
</style>
